<template>
  <div>
    <h2><el-text>班级成员</el-text></h2>
    <div class="table-box">
      <el-table :data="page.records" height="750">
        <el-table-column label="id" prop="id" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="账号" prop="account" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-text
              v-show="scope.row.status === EnumUserStatus.DISABLE"
              type="danger"
              >禁封</el-text
            >
            <el-text
              v-show="scope.row.status === EnumUserStatus.ENABLE"
              type="success"
              >正常</el-text
            >
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色">
          <template #default="scope">
            <el-text :type="isClassAdmin(scope.row) ? 'success' : 'info'">{{
              scope.row.role
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140">
          <template #default="scope">
            <div v-if="userInfo.role === EnumUserRole.CLASS_ADMIN">
              <div v-if="userInfo.id === scope.row.id">
                <el-text type="info">已为班级管理员</el-text>
              </div>
              <div v-else>
                <el-popconfirm
                  title="确定要转交职位吗？"
                  @confirm="changeClassAdmin(scope.row)"
                >
                  <template #reference>
                    <el-button type="danger"> 转交职位 </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
            <div v-else>
              <el-text type="info"> 暂无 </el-text>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination
        :page="page.current"
        :size="page.size"
        :total="page.total"
        @page-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getClassMemberApi } from '@src/apis/classApi.ts'
import { onMounted, ref } from 'vue'
import useUserStore from '@src/stores/useUserStore.ts'
import { router } from '@util/RouterUtil.ts'
import { ElMessage } from 'element-plus'
import TokenUtil from '@util/TokenUtil.ts'
import { EnumUserStatus } from '@src/enums/EnumUserStatus.ts'
import { EnumUserRole } from '@src/enums/EnumUserRole.ts'
import { TypeUser } from '@src/interfaces/TypeUser.ts'
import { TypePageDTO } from '@src/interfaces/TypePageDTO.ts'
import Pagination from '@src/components/Pagination.vue'
import tokenUtil from '@util/TokenUtil.ts'
import { storeToRefs } from 'pinia'
import Template from '@src/Template.vue'
import { changeClassAdminApi } from '@src/apis/userApi.ts'

const userInfo = storeToRefs(useUserStore()).userInfo

const page = ref<TypePageDTO<TypeUser>>({
  current: 1,
  records: [],
  size: 10,
  total: 0,
})
const search = ref({
  name: '',
  account: '',
  phone: '',
})

function isClassAdmin(user: TypeUser) {
  return user.role === EnumUserRole.CLASS_ADMIN
}

function getClassMember() {
  TokenUtil.refresh().then(() => {
    const classId = useUserStore().userInfo.classId
    if (!classId) {
      ElMessage.warning('未加入班级')
      return toJoinClass()
    }

    getClassMemberApi({
      page: page.value.current,
      size: page.value.size,
      ...search.value,
    }).then(({ data }) => {
      page.value = data
    })
  })
}

function toJoinClass() {
  return router.push('/class/join')
}

const handleCurrentChange = (value: number) => {
  page.value.current = value
  getClassMember()
}
const handleSizeChange = (value: number) => {
  page.value.size = value
  getClassMember()
}

const changeClassAdmin = (user: TypeUser) => {
  changeClassAdminApi(<number>user.id).then(() => {
    ElMessage.success(`${user.name}已成为班级管理员`)
    getClassMember()
  })
}

onMounted(() => {
  getClassMember()
  tokenUtil.refresh()
})
</script>

<style scoped lang="less">
h2 {
  text-align: center;
  .el-text {
    font-size: 2em;
  }
}

.input-box {
  display: flex;

  & > * {
    margin: 0 10px;
  }
}
</style>
